<template>
  <div>
    首页1
    <!-- 四大卡片 -->
    <kapian :list="cardlist" />
    <!-- 折线图 -->

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import kapian from './components/kapain.vue'

// 全部引入
import * as echarts from 'echarts'

import { getTotaldata } from '../../api/index.js'
export default {
  components: { kapian },
  data() {
    return {
      cardlist: [
        {
          id: 1,
          sorts: 'totalOrder',
          icon: 'icon-wenjian',
          name: '总订单',
          num: '104'
        },
        {
          id: 2,
          sorts: 'totalAmount',
          icon: 'icon-wenjian',
          name: '总销售额',
          num: '104'
        },
        {
          id: 3,
          sorts: 'todayOrder',
          icon: 'icon-wenjian',
          name: '今日订单数',
          num: '104'
        },
        {
          id: 4,
          sorts: 'totayAmount',
          icon: 'icon-wenjian',
          name: '今日销售额',
          num: '104'
        }
      ]
    }
  },
  created() {},
  // 操作dom需要 mounted
  mounted() {
    this.getDates()
    this.initCharts()
  },
  methods: {
    async getDates() {
      const data = await getTotaldata()
      // 根据上面卡片的数组进行遍历
      this.cardlist.forEach(function(value, index) {
        value.num = data[value.sorts]
      })
      console.log(data)
      var myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['销售额统计', '订单统计']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '销售额统计',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '订单统计',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      }

      // 指定图表的配置项和数据
      // 将请求回来的数据对option进行改造

      option.xAxis[0].data = data.xData
      option.series[0].data = data.amountData
      option.series[1].data = data.orderData
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

    initCharts() {}
  }
}
</script>

<style lang="less" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    font-size: 30px;
  }
  h3 {
    color: green;
    margin-bottom: 10px;
  }
  p {
    color: red;
  }
}
.bg-purple {
  background: #d3dce6;
}
#main {
  margin: 50px;
}
</style>
